<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #fff;
            line-height: 1;
            overflow: hidden;
        }
        /*日历框*/

        .rl_box {
            height: 13.5rem;
            width: calc(100vw - 25px);
            position: fixed;
            bottom: 1rem;
            left: 12.5px;
            background: #ffc75e;
            border-radius: 0.5rem;
            /*z-index: -1;*/
        }

        .today {
            text-align: center;
            padding: 0.5rem;
            color: #FFF;
            font-weight: 600;
        }
        /*记录*/

        .jl_box {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem 0;
        }

        .jl_box .line {
            width: 1px;
            height: 0.5rem;
            background: #ffc75e;
            margin: 0rem 1rem;
        }

        .have_day,
        .get_jf {
            font-size: 0.75rem;
            color: #ffc75e;
        }

        .have_day span,
        .get_jf span {
            font-size: 1rem;
            color: #f23030;
            padding: 0 0.2rem;
        }

        .img_box {
            position: relative;
            height: calc(100vh - 17.5rem);
            background: -webkit-linear-gradient(#fdbf48, #ffb228);
            background: -o-linear-gradient(#fdbf48, #ffb228);
            background: -moz-linear-gradient(#fdbf48, #ffb228);
            background: linear-gradient(to right, #fdbf48, #ffb228);
            border-radius: 0 0 50% 50%;
            width: 150%;
            left: 50%;
            transform: translateX(-50%);
        }

        .img_box img {
            width: 100%;
        }

        .gz_btn {
            position: absolute;
            right: 0;
            top: 1rem;
            padding: 0.3rem 0.2rem 0.3rem 0.7rem;
            border-radius: 1rem 0 0 1rem;
            background: #ff8f31;
            font-size: 0.7rem;
            color: #fff;
            z-index: 99;
        }

        .qd_btn {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 50%;
            transform: translateX(-50%);
            padding: 0.5rem 0;
            background: #f23030;
            color: #FFF;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 1rem;
            text-align: center;
        }

        img.txt_img {
            width: 40%;
            position: absolute;
            left: 50%;
            top: 2.5rem;
            transform: translateX(-50%);
            z-index: 2;
        }

        img.box_img {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .gz_url_box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999999;
            display: none;
        }

        .iframe_box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90vw;
            height: 50vh;
            background: #fff;
            border-radius: 0.5rem;
            overflow: hidden;
        }

        .iframe_box .btn_title {
            position: relative;
            padding: 0.5rem 0;
            text-align: center;
            color: #fff;
            background: #ffc75e;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .iframe_box .btn_title .close_btn {
            position: absolute;
            right: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 1rem;
        }

        .gz_url_box iframe{
          width: 100%;
          height: calc(100% - 0.9rem);
          border: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="gz_btn" onclick="look_gz()">签到规则</div>
        <div class="img_box">
            <img src="../../image/txt.png" alt="" class="txt_img">
            <img src="../../image/box.png" alt="" class="box_img">
            <div class="qd_btn" onclick="to_qd()">签到领取10积分</div>
        </div>

        <div class="jl_box">
            <div class="have_day">本月已签到<span>0</span>天</div>

            <div class="line"></div>

            <div class="get_jf">已领取<span>10</span>积分</div>
        </div>

        <div class="rl_box">
            <div class="today">2018.06</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    var punch = {
        apicloud: '',
        punch_post_url: Url.Freeucenter_sign,
        punch_list_url: Url.Freeucenter_signData,
        file_save_path: 'fs://xnyc_punch.txt', //存储缓存
        //基本信息
        user: {
            token: "",
            today: '', //用于检查是否今天的缓存
            render_data: [], //用于显示数据
            status: false, //是否已经签到
            integral: 0, //签到积分
            count: 0, //本月已经签到的天数
            user_integral: 0, //已领取积分数量
            rules: '', //积分规则链接
            list: {} //已签到列表
        },
        //初始化
        init: function(api, $api) {

            this.apicloud = api;
            this.jsapi = $api;
            // this.del_info();
            if (typeof this.apicloud == 'undefined') {
                alert('未能找到api');
                return false;
            }
            this.user.token = this.jsapi.getStorage('token') || '';
            if (this.user.token == '') {
                console.log('未能获取到token');
                return false;
            }
            var user_tmp = this.get_info();


            if (this.user.token == user_tmp.token) {
                this.user = user_tmp;

                console.log("初始化----"+JSON.stringify(this.user));

                $('.get_jf span').text(this.user.user_integral);
                $('.have_day span').text(this.user.count);

            } else {
                this.del_info();
            }

        },
        //加载数据
        list: function() {
            //加载缓存
            var u = this.get_info();
            if (u.today != '' && u.today == parseInt(new Date().setHours(0, 0, 0, 0) / 1000)) {
                this.user = u;
            } else {
                //未有缓存或缓存过期从服务器加载
                var _this = this;
                this.apicloud.ajax({
                    url: _this.punch_list_url,
                    method: 'post',
                    data: {
                        values: {
                            token: _this.user.token
                        }
                    }
                }, function(ret, err) {
                  console.log("签到列表数据----"+JSON.stringify(ret));
                    if (ret.re == 1) {
                        var token = _this.user.token;
                        var today = _this.user.today;
                        _this.user = ret.data;
                        _this.user.token = token;
                        _this.user.today = today;
                        //格式化数据用于后面使用
                        if (_this.user.list.length > 0) {
                            _this.user.render_data = [];
                            for (var i in _this.user.list) {
                                _this.user.render_data.push({
                                    date: _this.user.list[i].time
                                });
                            }
                        }

                        $('.get_jf span').text(ret.data.user_integral);
                        $('.have_day span').text(ret.data.count);
                        _this.save_info();


                        if(ret.data.list.length>0){
                          var now = new Date();
                          punch.user.render_data.push({
                              date: now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()
                          });
                          UICalendar.setSpecialDates({
                              specialDates: punch.user.render_data
                          });
                          $('.get_jf span').text(ret.data.user_integral);
                          $('.have_day span').text(ret.data.count);
                        }
                    } else {
                        console.log('出现错误:' + JSON.stringify(ret));
                    }
                });
            }

        },
        //提交签到
        post: function(callback) {
            if (this.user.token == '') {
                // alert("请先登录");
                api.toast({
                    msg: '请先登录~~',
                    duration: 2000,
                    location: 'bottom'
                });
                return false;
            }
            if (this.user.status) {
                api.toast({
                    msg: '已签到~~',
                    duration: 2000,
                    location: 'bottom'
                });
                return false;
            }
            var _this = this;
            api.ajax({
                url: _this.punch_post_url,
                method: 'post',
                data: {
                    values: {
                        token: _this.user.token
                    }
                }
            }, function(ret, err) {
                if (ret.re == 1) {
                    api.toast({
                        msg: '签到成功',
                        duration: 2000,
                        location: 'bottom'
                    });
                    callback && callback(ret);
                }
            });

        },
        //存储缓存
        save_info: function() {
            if (this.user.token != '' && this.user.list != '') {
                this.user.today = parseInt(new Date().setHours(0, 0, 0, 0) / 1000);
                var status = this.apicloud.writeFile({
                    path: this.file_save_path,
                    data: JSON.stringify(this.user)
                });
            }
        },
        //读取缓存
        get_info: function() {
            var obj = this.apicloud.readFile({
                path: this.file_save_path,
                sync: true
            });

            console.log("读取缓存数据----"+obj);
            if (typeof obj != 'undefined' && obj != '') {
                try {
                    obj = JSON.parse(obj);
                    return obj;
                } catch (e) {
                    alert('缓存数据有误，请检查!');
                    return '';
                }
            }
            return this.user;
        },
        del_info: function() {
            this.apicloud.writeFile({
                path: this.file_save_path,
                data: ''
            });
        }
    }

    var UICalendar;
    // var gz_url;
    apiready = function() {
        // alert(api.frameWidth)
        if (api.frameWidth <= 320) {
            $('.box_img').css({
                'width': '10%',
                'top': '5rem'
            })
        } else {
            $('.box_img').css({
                'width': '15%',
                'top': '6.5rem'
            })
        }
        punch.init(api, $api);
        punch.list();

        var today_day;
        UICalendar = api.require('UICalendar');
        UICalendar.open({
            rect: {
                x: 30,
                y: api.frameHeight - 250,
                w: api.frameWidth - 60,
                h: 220
            },
            styles: {
                bg: '#fff3dd',
                week: {
                    weekdayColor: '#3b3b3b',
                    weekendColor: '#a8d400',
                    size: 12
                },
                date: {
                    color: '#3b3b3b',
                    selectedColor: '#fff',
                    selectedBg: '#a8d500',
                    size: 12
                },
                today: {
                    color: 'rgb(230,46,37)',
                    bg: ''
                },
                specialDate: {
                    color: '#a8d500',
                    bg: 'widget://image/cp_footer3_N.png'
                }
            },
            specialDate: punch.user.render_data,
            switchMode: 'vertical',
            fixedOn: api.frameName,
            fixed: false
        }, function(ret, err) {
            if (ret) {
                console.log("日历的回调函数---" + JSON.stringify(ret))

                if (ret.eventType == 'show') {
                    $('.today').text(ret.year + '.' + ret.month)
                    today_day = ret.day;
                }else if(ret.eventType == 'switch'){
                  $('.today').text(ret.year + '.' + ret.month)
                }
                else if (ret.eventType == "normal") {
                    if (ret.day != today_day) {
                        api.toast({
                            msg: '不能签到',
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                } else {
                    to_qd();
                }

            }
        });

    };


    // 点击签到
    function to_qd() {
        punch.post(function(ret) {
            //"re":"1","info":"签到成功","data":{"integral":"10"}，由于未返回签到日期，只直接在今日标签上打个印记
            var now = new Date();
            punch.list();
            punch.user.render_data.push({
                date: now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()
            });
            UICalendar.setSpecialDates({
                specialDates: punch.user.render_data
            });
        });
    }


    // 查看规则
    function look_gz() {

      api.openFrame({
          name: 'punchcard_gz_frame',
          url: 'punchcard_gz_frame.html',
          rect: {
              x: 0,
              y: 0,
              w: 'auto',
              h: 'auto'
          },
          pageParam: {
              name: 'test'
          },
          bounces: false,
          bgColor: 'rgba(0,0,0,0)'
      });
    }

</script>

</html>
